<template>
  <div class="person-details">
    <!-- <div class="person-details-top">
      <b-tabs v-model="activeTab" :items="tabs" class="person-details-tabs"></b-tabs>
    </div> -->

    <div class="person-details-content">
      <primary-info :params="personInfo" v-if="activeTab === '1'" />
      <!-- <base-info v-if="activeTab === '2'" />
      <work-info v-if="activeTab === '3'" />
      <family-info v-if="activeTab === '4'" />
      <training-record v-if="activeTab === '8'" /> -->
    </div>
  </div>
</template>
<script setup lang="ts">
import { getPersonInfoByName } from '@/api/person';
import { ref, onMounted } from 'vue';
import primaryInfo from './primary_info.vue';
// import BTabs from '@/components/b-tabs.vue';
// import baseInfo from './base_Info.vue';
// import workInfo from './work_info.vue';
// import familyInfo from './family_info.vue';
// import trainingRecord from './training_record.vue';

const props = defineProps({
  params: {
    type: Object,
    default: () => ({})
  }
})

const personInfo = ref({})
onMounted(async () => {
  const { data } = await getPersonInfoByName(props.params.name)
  personInfo.value = data
})

const tabs = ref([
  { id: '1', label: '主要信息' },
  { id: '2', label: '基本信息' },
  { id: '3', label: '工作信息' },
  { id: '4', label: '家庭信息' },
  // { id: '5', label: '资格证书' },
  // { id: '6', label: '体检信息' },
  // { id: '7', label: '从业履历' },
  { id: '8', label: '培训经历' },
  // { id: '9', label: '合同状态' },
  // { id: '10', label: '晋升或奖惩记录' },
  // { id: '11', label: '证件信息' },
  // { id: '12', label: '其他补充材料' },
])

const activeTab = ref('1')
</script>
<style scoped lang="scss">
.person-details{
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--scale));
  .person-details-content{
    flex: 1;
    overflow: auto;
  }
}
</style>